<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
			
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
			<script type="text/javascript" src="../assets/plugins/include-lib.js" include="jquery,jquery.range,bootstrap,admin-lte,haoutil,jquery.scrollTo,ace,lazyload"
			 libpath="../assets/plugins/"></script>
			<link rel="stylesheet" href="../assets/plugins/bootstrap/bootstrap-checkbox/awesome-bootstrap-checkbox.css"
			 type="text/css" />
			
			
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css"
			type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" />
		<link rel="stylesheet" href="../assets/css/CEarth-Example.css"
			type="text/css" />
		<style>
			.cesium-button {
				background-color: #3f4854;
				color: #e6e6e6;
				fill: #e6e6e6;
				box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
				line-height: 32px;
			}
		</style>
	</head>
	<body>
		<div id="CEarthContainer" class="CEarth-container"></div>
		
		<div class="infoview">
			  <table class="mars-table">
				<tbody>
				  <tr>
					<td rowspan="9">场景Scene</td>
					<td class="nametd">场景模式</td>
					<td>
					  <select id="sceneMode" class="sceneMode">
						<option value="3">三维视图</option>
						<option value="2">二维视图</option>
						<option value="1">哥伦布视图</option>
					  </select>
					</td>
				  </tr>
				  <tr>
					<td class="nametd">高动态渲染</td>
					<td>
					  <input type="radio" name="high" checked="" onclick="setSceneOptions('highDynamicRange',true)">是
					  <input type="radio" name="high" onclick="setSceneOptions('highDynamicRange',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">快速抗锯齿</td>
					<td>
					  <input type="radio" name="fxaa" checked="" onclick="setSceneOptions('fxaa',true)">是
					  <input type="radio" name="fxaa" onclick="setSceneOptions('fxaa',false)">否
					</td>
				  </tr>

				  <tr>
					<td class="nametd">显示太阳</td>
					<td>
					  <input type="radio" name="sun" checked="" onclick="setSceneOptions('showSun',true)">是
					  <input type="radio" name="sun" onclick="setSceneOptions('showSun',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">显示月亮</td>
					<td data-name="moon">
					  <input type="radio" name="moon" checked="" onclick="setSceneOptions('showMoon',true)">是
					  <input type="radio" name="moon" onclick="setSceneOptions('showMoon',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">显示天空盒</td>
					<td>
					  <input type="radio" name="skyBox" checked="" onclick="setSceneOptions('showSkyBox',true)">是
					  <input type="radio" name="skyBox" onclick="setSceneOptions('showSkyBox',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">空间背景颜色</td>
					<td>
					  <input type="color" id="colorStyle" style="width: 60px">
					</td>
				  </tr>
				  <tr>
					<td class="nametd">大气外光圈</td>
					<td>
					  <input type="radio" name="skyAt" checked="" onclick="setSceneOptions('showSkyAtmosphere', true)">是
					  <input type="radio" name="skyAt" onclick="setSceneOptions('showSkyAtmosphere',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">雾化效果</td>
					<td>
					  <input type="radio" name="fog" checked="" onclick="setSceneOptions('fog',true)">是
					  <input type="radio" name="fog" onclick="setSceneOptions('fog',false)">否
					</td>
				  </tr>

				  <!-- 地球属性 -->
				  <tr>
					<td rowspan="5">地球Globe</td>
					<td class="nametd">地形夸张倍数</td>
					<td>
					  <input id="terrain" type="range" min="1" max="80" value="1" step="1" style="width: 80px; background-size: 0% 100%;" title="1">
					</td>
				  </tr>
				  <tr>
					<td class="nametd">昼夜区域</td>
					<td data-name="lighting">
					  <input type="radio" name="light" onclick="setSceneGlobeOptions('enableLighting',true)">是
					  <input type="radio" name="light" checked="" onclick="setSceneGlobeOptions('enableLighting',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">绘制地面大气</td>
					<td>
					  <input type="radio" name="atmosphere" checked="" onclick="setSceneGlobeOptions('showGroundAtmosphere',true)">是
					  <input type="radio" name="atmosphere" onclick="setSceneGlobeOptions('showGroundAtmosphere',false)">否
					</td>
				  </tr>

				  <tr>
					<td class="nametd">深度监测</td>
					<td>
					  <input type="radio" name="depthTest" onclick="setSceneGlobeOptions('depthTestAgainstTerrain',true)">是
					  <input type="radio" name="depthTest" checked="" onclick="setSceneGlobeOptions('depthTestAgainstTerrain',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">地球背景色</td>
					<td>
					  <input type="color" id="baseColor" value="#546a53" style="width: 60px">
					</td>
				  </tr>

				  <tr>
					<td rowspan="10">鼠标交互</td>
					<td class="nametd">缩放地图</td>
					<td>
					  <input type="radio" name="zooms" checked="" onclick="setSceneCameraControllerOptions('enableZoom',true)">是
					  <input type="radio" name="zooms" onclick="setSceneCameraControllerOptions('enableZoom',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">倾斜相机(3D和2.5D)</td>
					<td>
					  <input type="radio" name="tilt" checked="" onclick="setSceneCameraControllerOptions('enableTilt',true)">是
					  <input type="radio" name="tilt" onclick="setSceneCameraControllerOptions('enableTilt',false)">否
					</td>
				  </tr>

				  <tr>
					<td class="nametd">旋转转换位置(3D和2D)</td>
					<td>
					  <input type="radio" name="rotate" checked="" onclick="setSceneCameraControllerOptions('enableRotate',true)">是
					  <input type="radio" name="rotate" onclick="setSceneCameraControllerOptions('enableRotate',false)">否
					</td>
				  </tr>

				  <tr>
					<td class="nametd">平移地图(2D和2.5D)</td>
					<td>
					  <input type="radio" name="translate" checked="" onclick="setSceneCameraControllerOptions('enableTranslate',true)">是
					  <input type="radio" name="translate" onclick="setSceneCameraControllerOptions('enableTranslate',false)">否
					</td>
				  </tr>

				  <tr>
					<td class="nametd">可操作南北极</td>
					<td>
					  <input type="radio" name="axis" onclick="setSceneCameraControllerOptions('constrainedAxis',true)">是
					  <input type="radio" name="axis" checked="" onclick="setSceneCameraControllerOptions('constrainedAxis',false)">否
					</td>
				  </tr>

				  <tr>
					<td class="nametd">可否进入地下</td>
					<td>
					  <input type="radio" name="detection" onclick="setSceneCameraControllerOptions('enableCollisionDetection',true)">是
					  <input type="radio" name="detection" checked="" onclick="setSceneCameraControllerOptions('enableCollisionDetection',false)">否
					</td>
				  </tr>
				  <tr>
					<td class="nametd">最小碰撞高度(米)</td>
					<td>
					  <input id="minimumCollision" data-name="minimumCollisionTerrainHeight" type="range" min="1" max="500000" value="15000" step="100" style="width: 80px; background-size: 3% 100%;" title="15001">
					</td>
				  </tr>

				  <tr>
					<td class="nametd">相机最近视距(米)</td>
					<td>
					  <input id="minimumZoom" data-name="minimumZoomDistance" type="range" min="1" max="10000" value="1" step="100" style="width: 80px; background-size: 0% 100%;" title="1">
					</td>
				  </tr>
				  <tr>
					<td class="nametd">相机最远视距(米)</td>
					<td>
					  <input id="maximumZoom" data-name="maximumZoomDistance" type="range" min="10000" max="90000000" value="50000000" step="1000" style="width: 80px; background-size: 55% 100%;" title="50000000">
					</td>
				  </tr>

				  <tr>
					<td class="nametd">滚轮放大倍数</td>
					<td>
					  <input id="zoomFactor" type="range" data-name="zoomFactor" min="1" max="10" value="1" step="1" style="width: 80px; background-size: 0% 100%;" title="1">
					</td>
				  </tr>
				</tbody>
			  </table>
			</div>		
		
		
		
		
		
		
		
		
		

		<script src="../../../build/Cesium/Cesium.js"></script>
		
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script>
			//创建三维地球场景 
			var viewer = new CEarth.App('CEarthContainer', {
				scene: {
					center: {
						x: 102.833722,
						y: 24.881539,
						z: 50000,
						heading: 0,
						pitch: -90
					},
					showSun: true,
					showMoon: true,
					showSkyBox: true,
					showSkyAtmosphere: false,
					fog: true,
					fxaa: true,
					globe: {
						show: true,
						showGroundAtmosphere: false,
						depthTestAgainstTerrain: false,
						baseColor: '#546a53',
					},
					cameraController: {
						zoomFactor: 3.0,
						minimumZoomDistance: 1,
						maximumZoomDistance: 50000000,
						enableRotate: true,
						enableZoom: true,
					},
				},
				control: {
					baseLayerPicker: true, //basemaps底图切换按钮
					homeButton: true, //视角复位按钮
					sceneModePicker: true, //二三维切换按钮
					navigationInstructionsInitiallyVisible: false, //默认不显示帮助信息
					navigationHelpButton: true, //帮助按钮
					fullscreenButton: true, //全屏按钮
					timeline: false, //时间轴
					animation: false, //动画部件
				},
				terrain: {},
				imageryViewModels: [{
					name : 'Open\u00adStreet\u00adMap',
					iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
					tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable \map of the world.\nhttp://www.openstreetmap.org',
					params: {
						type:'osm',
						url:'https://a.tile.openstreetmap.org/'
					},
					show:true,
					index:0
				}],
			});
		</script>
	</body>
</html>
